<template>
    <div class="outBox">
        <div class="bracket_selector">
            <div class="bracket"><img ref="left" @mousedown="showL" @mouseup="closeL"
                    src="./zuokuohao.png" alt="">左括号</div>
            <div class="bracket"><img ref="right" @mousedown="showR" @mouseup="closeR"
                    src="./youkuohao.png" alt="">右括号</div>
        </div>
        <div class="condition_box" ref="conditionBox">
            <div class="condition_each" v-for="(item, index) in condition.elList" :key="index" :data-index="index">
                <div class="wait_bracket" v-show="item.showl"></div>
                <div>
                    <div v-if="item.context == 'ao'">
                        <el-select v-model="item.value" style="width: 60px; margin: 0 5px;" size="mini">
                            <el-option v-for="item in options_ao" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div v-if="item.context == 'condition'" style="margin-right: 15px; margin-left: 2px;">
                        <el-select v-model="item.value.first" style="width: 100px; margin-right: 10px;" size="mini"
                            placeholder="请选择">
                            <el-option v-for="item in options_first" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="item.value.second" style="width: 75px; margin-right: 10px;" size="mini">
                            <el-option v-for="item in options_second" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="item.value.third" style="width: 100px;" size="mini" placeholder="请输入内容">
                        </el-input>
                        <div class="delete_this" @click="deleteThis(index)">×</div>
                    </div>
                    <div v-if="item.context == 'left'" class="inner_bracket">(
                        <div class="delete_this" @click="deleteThis(index)">×</div>
                    </div>
                    <div v-if="item.context == 'right'" class="inner_bracket">)
                        <div class="delete_this" @click="deleteThis(index)">×</div>
                    </div>
                </div>
                <div class="wait_bracket" v-show="item.showr"></div>
            </div>
            <div class="add_new" @click="addSift">添加条件</div>
        </div>
    </div>
</template>
<script>
export default {
    // props: ['value'],
    props: {
        value: Object
    },
    data() {
        return {
            condition: {},
            options_ao: [{
                value: 'and',
                label: '且'
            }, {
                value: 'or',
                label: '或'
            }],
            options_first: [{
                value: '选项1',
                label: '选项1'
            }, {
                value: '选项2',
                label: '选项2'
            }],
            options_second: [{
                value: 'more',
                label: '大于'
            }, {
                value: 'less',
                label: '小于'
            }],
        }
    },
    beforeMount() {
        this.condition = this.value;
    },
    mounted() {
        // 结束拖拽隐藏
        const l = this.$refs.left;
        l.ondragend = () => {
            this.condition.elList.forEach(item => {
                item.showl = false;
            })
        }
        const r = this.$refs.right;
        r.ondragend = () => {
            this.condition.elList.forEach(item => {
                item.showr = false;
            })
        }
        this.addFill();
    },
    methods: {
        // 显示和隐藏
        //#region 
        showL() {
            this.condition.elList.forEach(item => {
                item.showl = !item.havel ? true : false;
            })
        },
        closeL() {
            this.condition.elList.forEach(item => {
                item.showl = false;
            })
        },
        showR() {
            this.condition.elList.forEach(item => {
                item.showr = !item.haver ? true : false;
            })
        },
        closeR() {
            this.condition.elList.forEach(item => {
                item.showr = false;
            })
        },
        //#endregion
        addSift() {
            if (this.condition.conditionCounts != 0) {
                this.condition.elList.push({
                    showl: false,
                    showr: false,
                    havel: true,
                    haver: true,
                    context: 'ao',
                    value: 'and'
                });
            }
            this.condition.elList.push({
                showl: false,
                showr: false,
                havel: false,
                haver: false,
                context: 'condition',
                value: {
                    first: '',
                    second: 'more',
                    third: '',
                }
            });
            this.$nextTick(() => {
                this.condition.conditionCounts++;
                this.addFill();
            })
        },
        addFill() {
            const conditionBox = this.$refs.conditionBox;
            conditionBox.childNodes.forEach(item => {
                if (item.childNodes.length == 0) return;
                const i = item.dataset['index'];
                // left
                if (item.childNodes.length == 3) {
                    if (!item.childNodes[0].ondragover) {
                        item.childNodes[0].ondragover = event => {
                            event.preventDefault();
                        }
                        item.childNodes[0].ondrop = () => {
                            this.condition.elList[i].havel = true;
                            this.condition.elList.splice(i, 0, {
                                showl: false,
                                showr: false,
                                havel: false,
                                haver: true,
                                context: 'left',
                                value: 'left'
                            });
                            this.$nextTick(() => {
                                this.addFill();
                            })
                        }
                        // right
                        item.childNodes[2].ondragover = event => {
                            event.preventDefault();
                        }
                        item.childNodes[2].ondrop = () => {
                            this.condition.elList[i].haver = true;
                            this.condition.elList.splice(i*1+1, 0, {
                                showl: false,
                                showr: false,
                                havel: true,
                                haver: false,
                                context: 'right',
                                value: 'right'
                            });
                            this.$nextTick(() => {
                                this.addFill();
                            })
                        }
                    }
                }
            })
        },
        deleteThis(index) {
            const con = this.condition.elList[index].context;
            const val = this.condition.elList[index].value;
            if(val == 'left') this.condition.elList[index+1].havel = false;
            if(val == 'right') this.condition.elList[index-1].haver = false;
            con != 'condition' && this.condition.elList.splice(index, 1);
            if(con == 'condition') {
                // 针对第一个
                let isFirst = true;
                for (let i = index-1; i > 0; i--) {
                    if(this.condition.elList[i].context == 'ao') {
                        isFirst = false;
                        this.condition.elList.splice(index, 1);
                        this.condition.elList.splice(i, 1);
                        this.condition.conditionCounts--;
                        break;
                    }
                }
                if(isFirst && this.condition.conditionCounts == 1) {
                    this.condition.elList.splice(index, 1);
                    this.condition.conditionCounts--;
                }
            }
        }
    }
}
</script>
<style scoped>
.outBox {
    box-sizing: border-box;
    width: 777px;
}

.bracket_selector {
    display: flex;
    margin: 15px 0;
}

.bracket_selector .bracket {
    position: relative;
    width: 62px;
    height: 24px;
    margin-right: 15px;
    border: 1px solid #749dfe;
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    color: #749dfe;
    user-select: none;
}



.bracket_selector .bracket img {
    position: absolute;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.condition_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px;
    background-color: #fafaf9;
}

.condition_box div {
    position: relative;
}

.condition_box div .delete_this {
    position: absolute;
    top: -5px;
    right: -15px;
    cursor: pointer;
    user-select: none;
    color: #ccc;
    font-size: 13px;
}

.condition_each {
    display: flex;
    height: 30px;
    margin: 5px 0;
    align-items: center;
    justify-content: center;
}

.wait_bracket {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    border: 1px dashed #ccc;
}

.add_new {
    height: 22px;
    margin: 9px 0 9px 20px;
    line-height: 22px;
    font-size: 13px;
    color: #5b8bfd;
    cursor: pointer;
    user-select: none;
}

.inner_bracket {
    height: 100%;
    margin: 0 5px;
    margin-right: 15px;
    line-height: 30px;
    color: #5b8bfd;
    font-size: 18px;
}
</style>